<template>
	<div>


		<el-card style=" position:sticky;top:20px;text-align: center;">
			<span style="size: 30px;">{{name.name}}</span>
			<br />
			<span style="float: left;">满分：{{name.zongfen}}</span>
			<br />
			<span style="float: left;">及格分：{{name.jige}}</span>
			<br />
			<span style="float: right; color: red;"><i class="el-icon-time"></i> {{ `${hr}: ${min}: ${sec}` }}
				(过时自动交卷)</span>
			<br />
		</el-card>
		<div style="margin-left: 50px; margin-right: 50px;">
			<el-card>
				<p style="font-size: 20px;">一、单选题:（共{{danList.length}}题，共{{danList.length*name.danXuanFen}}分）</p>

				<div v-for="(item,index) in danList" style="margin-top: 20px;margin-bottom:15px;">
					<span style="font-size: x-large;display: inline;" v-text="index+1"></span><span>、</span><span
						style="margin-left: 1px;display: inline" v-html="item.timu"></span>
					<div type="flex" class="row-bg" justify="space-around">
						<el-radio-group style="display: block;" v-for="(aa,id) in item.xuanxiang" :key="id"
							v-model="radioList[index]" @change="danxuan(item.id,aa.id)">
							<el-radio class="radio" :label="aa.id" border>{{aa.xuanxiang}}</el-radio>
						</el-radio-group>
					</div>
					<el-divider></el-divider>
				</div>

			</el-card>
			<el-card>
				<p style="font-size: 20px;">二、多选题: （共{{duoList.length}}题，共{{duoList.length*name.duoXuanFen}}分）</p>
				<div v-for="(item,index) in duoList" style="margin-top: 20px;margin-bottom:15px ;">
					<span style="font-size: x-large;display: inline;" v-text="index+1"></span><span>、</span><span
						style="margin-left: 1px;display: inline" v-html="item.timu"></span>
					<div>
						<el-checkbox-group v-for="(cc,index) in item.xuanxiang" :key="index" v-model="duo"
							@change="duoxuan(item.id,cc)">
							<el-checkbox class="radio" :key="cc.id" style="margin-top: 10px;" :label="cc.xuanxiang"
								border></el-checkbox>
						</el-checkbox-group>
					</div>
					<el-divider></el-divider>
				</div>
			</el-card>

			<el-card>
				<p style="font-size: 20px;">三、判断题:（共{{name.panDuanNum}}题，共{{panList.length*name.panDuanFen}}分）</p>
				<div v-for="(item,index) in panList" style="margin-top: 20px;margin-bottom:15px ;">
					<span style="font-size: x-large;display: inline;" v-text="index+1"></span><span>、</span><span
						style="margin-left: 1px;display: inline" v-html="item.timu"></span>
					<div>
						<el-radio-group v-for="(bb,id) in item.xuanxiang" :key="id" v-model="radio2List[index]"
							@change="panduan(item.id,bb.id)">
							<el-radio class="radio" :label="bb.id" border>{{bb.xuanxiang}}</el-radio>
						</el-radio-group>
					</div>
					<el-divider></el-divider>
				</div>
				<el-button style="width:150px;float: right;background-color: #0066CC; color: white;" @click="jiancha">交卷
				</el-button>
				<br />
				<br />
			</el-card>
		</div>

	</div>

</template>

<script>
	export default {

		data() {
			return {
				ppp: 0,
				checked: false,
				isshow1: true,
				time: '',
				duo: [],
				name: {},
				date: '',
				hr: 0,
				radioList: [],
				checkList: [],
				radio2List: [],
				min: 1,
				sec: 0,
				list: [],
				danList: [],
				duoList: [],
				panList: [],
				danAnwser: [],
				duoAnwser: [],
				panAnwser: [],
				grade: 0,
			}
		},
		created() {
			
				if (location.href.indexOf("#reloaded") == -1) {
					location.href = location.href + "#reloaded";
					 location.reload();
					
				}
			
			if (!window.sessionStorage.getItem("shijuanId")) {
				window.location.href = "javascript:history.go(-1)";
				this.$message.error("请不要有侥幸心理哦！")
				return
			}

			this.begin()
			this.findShijuan()
			this.list = JSON.parse(window.sessionStorage.getItem("timu"))

			this.$nextTick(() => {
				this.danList = this.list[0];
				this.duoList = this.list[1];
				this.panList = this.list[2];
			})

			if (this.danList) {
				for (let i = 0; i < this.danList.length; i++) {
					this.radioList.push("");
				}
			}
			if (this.duoList) {
				for (let i = 0; i < this.duoList.length; i++) {
					this.checkList.push([]);
				}
			}
			if (this.panList) {
				for (let i = 0; i < this.panList.length; i++) {
					this.radio2List.push("");
				}
			}

		},
		methods: {
			gaiDanxuan() {

				for (let i = 0; i < this.danList.length; i++) {
					for (let a = 0; a < this.danAnwser.length; a++) {
						if (this.danList[i].id == this.danAnwser[a].a) {
							for (var b = 0; b < this.danList[i].xuanxiang.length; b++) {
								if (this.danList[i].xuanxiang[b].isRight == true) {
									if (this.danList[i].xuanxiang[b].id == this.danAnwser[a].b) {
										this.grade += this.name.danXuanFen
									} else {
										continue
									}
								}
							}
						} else {
							continue
						}

					}
				}

			},
			gaiPan() {

				for (let i = 0; i < this.panList.length; i++) {
					for (let a = 0; a < this.panAnwser.length; a++) {
						if (this.panList[i].id == this.panAnwser[a].a) {
							for (var b = 0; b < this.panList[i].xuanxiang.length; b++) {
								if (this.panList[i].xuanxiang[b].isRight == true) {
									if (this.panList[i].xuanxiang[b].id == this.panAnwser[a].b) {
										this.grade += this.name.panDuanFen
									} else {
										continue
									}
								}
							}
						} else {
							continue
						}

					}
				}

			},
			gaiDuoXuan() {
				var duozong = 0
				console.log(this.duoList);
				console.log(this.duoAnwser);
				for (let i = 0; i < this.duoList.length; i++) {
					for (let a = 0; a < this.duoAnwser.length; a++) {

						if (this.duoList[i].id == this.duoAnwser[a].a) {

							var duofen = 0;
							for (let b = 0; b < this.duoAnwser[a].b.length; b++) {
								if (this.duoAnwser[a].b[b].isRight == true) {

									duofen += ((this.name.duoXuanFen) / this.duoList[i].xuanxiang.length)
								} else {
									duofen = 0
								}
							}
							duozong += duofen
						} else {
							continue
						}
					}
				}
				console.log(duozong);
				this.grade += duozong

			},
			findShijuan() {
				var id = window.sessionStorage.getItem("shijuanId")
				this.$ajax.post("/Shijuan/findById", {
					"id": id
				}).then(res => {
					this.name = res.data.data
				})
			},
			jiancha() {
				if (this.danAnwser.length != this.danList.length) {
					this.$confirm('您还有' + (this.danList.length - this.danAnwser.length) + '道单选题未完成，确定交卷吗？', '单选题', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.save()
					}).catch(() => {
						return;
					});
					return;
				} else if (this.duoAnwser.length != this.duoList.length) {
					this.$confirm('您还有' + (this.duoList.length - this.duoAnwser.length) + '道多选题未完成，确定交卷吗？', '多选题', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.save()
					}).catch(() => {
						return;
					});
					return;
				} else if (this.panAnwser.length != this.panList.length) {
					this.$confirm('您还有' + (this.panList.length - this.panAnwser.length) + '道判断题未完成，确定交卷吗？', '判断题', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.save()
					}).catch(() => {
						return;
					});
					return;
				}
				this.save()

			},

			save() {
				const loading = this.$loading({
					lock: true,
					text: '正在努力批改试卷，请稍后！',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				this.grade = 0
				this.gaiDanxuan()
				this.gaiDuoXuan()
				this.gaiPan()
				setTimeout(() => {
					loading.close()
				},1000)

				this.grade = (this.grade).toFixed(1)
				var id = window.sessionStorage.getItem("shijuanId")
				this.$ajax.post("/Grade/save1", {
					"grade": this.grade,
					"shijuanId": id
				}).then(res => {
					if (res.data.sucess) {
						this.$message.success("成绩保存成功！")


					}
				})
				window.sessionStorage.setItem("cj", this.grade)
				window.sessionStorage.removeItem("shijuanId")
				this.$router.replace("/exam/cjym")


			},

			duoxuan(a, h) {

				for (let i = 0; i < this.duoAnwser.length; i++) {
					var bb = this.duoAnwser[i].b
					for (let q = 0; q < bb.length; q++) {
						if (bb[q].id == h.id) {
							bb.splice(q, 1)
							return
						}
					}
				}
				for (let i = 0; i < this.duoAnwser.length; i++) {
					if (this.duoAnwser[i].a == a) {
						var newa = this.duoAnwser[i].b
						for (let q = 0; q < newa.length; q++) {
							if (newa[q].id != h.id) {
								newa.push(h)
								return
							} else {
								newa.splice(q, 1)
								return
							}
						}
						return
					}
				}
				var b = new Array;
				b.push(h)
				this.duoAnwser.push({
					a,
					b
				})
				//console.log(this.duoAnwser);
			},
			danxuan(a, b) {
				for (let i = 0; i < this.danAnwser.length; i++) {
					if (this.danAnwser[i].a == a) {
						this.danAnwser[i].b = b

						return
					}
				}
				this.danAnwser.push({
					a,
					b
				});

			},
			panduan(a, b) {
				for (let i = 0; i < this.panAnwser.length; i++) {
					if (this.panAnwser[i].a == a) {
						this.panAnwser[i].b = b
						return
					}
				}
				this.panAnwser.push({
					a,
					b
				});
			},
			begin() {
				// 点击按钮后开始计算指定长度的时间
				this.time = (Date.parse(new Date()) + ((1 * 60 * 60)) * 1000);
				// 开始执行倒计时
				this.countdown();
				// 更换按钮，根据情况选择v-if或v-show
				this.isshow1 = false;

				this.$message({
					type: 'success',
					message: '开始答题'
				});
			},
			countdown() {
				const end = this.time; // 定义结束时间
				const now = Date.parse(new Date()); // 获取本地时间
				const msec = end - now; // 定义总共所需的时间
				// 将时间戳进行格式化
				let hr = parseInt(msec / 1000 / 60 / 60 % 24);
				let min = parseInt(msec / 1000 / 60 % 60);
				let sec = parseInt(msec / 1000 % 60);
				// 倒计时结束时的操作
				const that = this;
				if (this.hr == 0 && this.min == 0 && this.sec == 0) {
					console.log('时间已经结束，答题完毕');
					this.hr = 0;
					this.min = 0;
					this.sec = 0;
					this.save()
				} else {
					// 如时间未归零则继续在一秒后执行
					this.hr = hr > 9 ? hr : '0' + hr;
					this.min = min > 9 ? min : '0' + min;
					this.sec = sec > 9 ? sec : '0' + sec;
					setTimeout(that.countdown, 1000)
				}
			},
			open() {
				this.$confirm('即将结束答题, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then((action) => {
					// eleUI的确定结束回调函数方法
					if (action === 'confirm') {
						this.hr = 0;
						this.min = 0;
						this.sec = 0;
						console.log(this.hr + ',' + this.min + ',' + this.sec);
						this.isshow1 = true;
					}
					this.$message({
						type: 'success',
						message: '交卷成功!'
					});
				}).catch(() => {
					// 点击取消后
					this.$message({
						type: 'info',
						message: '已取消交卷'
					});
				});

			}
		}

	}
</script>

<style scoped>
	span {
		white-space: nowrap;
		display: inline;
	}

	.radio {
		margin: 10px 10px 10px 10px;
		display: block;
	}
</style>
